<template>
	<view class="bg-white" style="height: 100vh;">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">详情</block>
		</cu-custom>
		<view>
			<view class="title">
				<view class="padding" style="font-family: '宋体';">
					<text class="text-black title text-bold text-xl">{{annotation.titile}} </text>
				</view>
			</view>
			<view class=" text-df padding-left " style="color: #999;">
				<text class="title padding-right-xl" style="color: #999;">
					{{annotation.sender||''}}
				</text>	
				<text  class="" v-html="annotation.sendTime">
				</text>
			</view>
			<view class="desc" style="font-family: '仿宋';font-size: 18px;">
				<view class="text-content padding" v-html="annotation.msgContent">
					<!-- <annotation-block :content="annotation.msgContent"/> -->
				</view>
			</view>
			<view class="text-gray padding-left padding-bottom text-gray">
				<text class="cuIcon-attentionfill margin-lr-xs" @click="numberPlus"></text> 10
				<text class="cuIcon-appreciatefill padding-left margin-lr-xs" @click="numberPlus"></text> 20
			</view>
		</view>
		<scroll-view scroll-x class="scroll-view">
			<!-- <view class="flex text-center justify-around"> -->
				<view class="item" :class="item.value==TabCur?'text-blue cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="item.value">
					{{item.title}}
				</view>
			<!-- </view> -->
		</scroll-view>
		<!-- 页面的其他内容 -->
		<view class="tabbar_bottom">
			<view class="footer">
				<view v-if="annotation.workOrderStatus==3" @tap="takingOrders" class="btn">
					<text>接单</text>
				</view>
				<!-- <view class="btn">
					<text>转派</text>
				</view> -->
				<view v-if="annotation.workOrderStatus==15" class="btn">
					<text>预约客户</text>
				</view>
				<view v-if="annotation.workOrderStatus==15 || annotation.workOrderStatus==17 || annotation.workOrderStatus==9" class="btn">
					<text>服务记录</text>
				</view>
				<view v-if="annotation.workOrderStatus==16" class="btn">
					<text>签到</text>
				</view>
				<view v-if="annotation.workOrderStatus==17" class="btn">
					<text>回执</text>
				</view>
				<view v-if="annotation.workOrderStatus==9" class="btn">
					<text>回执审核</text>
				</view>
				<view v-if="annotation.workOrderStatus==12" class="btn">
					<text>回访</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const tabs = [{title:'工单信息',value:0}, {title:'工单流程',value:1}, {title:'工单回执',value:2}, {title:'现场签到',value:3}, {title:'服务记录',value:4}, {title:'工单回访',value:5},];

export default {
	data(){
		return{
			NavBarColor:this.NavBarColor,
			annotation:{
				id:"",
				titile:"",
				startTime:"",
				sender:"",
				msgContent:"",

			},
			goodNumber:null,
			flg:true,
			tabs,
			TabCur: 0,
		}
	},
	// onLoad:function(){
	// 	console.log("this.$Route.query",this.$Route);
	// 	let query = this.$Route.query
	// 	if(query){
	// 		this.annotation = query;
	// 		}
	// },
	onLoad: function (option) {
	    const annItem = JSON.parse(decodeURIComponent(option.item));
		console.log("ann",annItem)
		if(annItem.workOrderStatus==3){
			
		}
		this.annotation = annItem 
		this.readOk();
	},
	created(){
		console.log("created")
		//this.readOk();
	},
	methods:{
		readOk(){
			console.log("readOk")
			let param = {anntId:this.annotation.anntId}
			this.$http.put('/sys/sysAnnouncementSend/editByAnntIdAndUserId',param);
		},

		numberPlus(){
			if (this.flg){
				this.goodNumber++
				this.flg = false
			} else {
				this.goodNumber--
				if (this.goodNumber == 0){
					this.goodNumber = null
				}
				this.flg = true
			}
		},
		takingOrders(){
			alert(this.annotation.id);
		}
	}
}
</script>

<style>
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	}
	 
	.item {
	  display: inline-block;
	  width: 60px;
	  height: 45px;
	  background-color: #f0f0f0;
	  /* margin-right: 10px; */
	  line-height: 45px;
	  text-align: center;
	}
	
	.scroll-view .item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}
	
.tabbar_bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 54px;
	width: 100%;
    background: #FFFFFF;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 8px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    border-top: 0.5px solid #efefef;
    z-index: 101;
}
.tabbar_bottom .footer {
    padding: 8px 15px;
    display: flex;
}
.tabbar_bottom .footer .btn {
    width: 80px;
    height: 40px;
    border-radius: 5px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    background: blue;
    margin: 0 2px;
}
</style>
